<template>
  <content class="i18n-page h-100 flex-column">
    <div class="flex flex-wrap justify-between">
      <div>
        <el-button type="primary" :disabled="!multipleSelection.length" @click="batchReadClick">{{
          $t('MESSAGE_CONFIRM')
        }}</el-button>
        <el-button type="primary" :disabled="!multipleSelection.length" @click="batchDeleteClick">{{
          $t('DEL')
        }}</el-button>
        <!-- <el-button type="primary" :disabled="!tableData.length" @click="expDataClick">{{
          $t('EXPORT')
        }}</el-button> -->
        <el-button type="primary" @click="clear">{{
          $t('CLEAR_UNREAD')
        }}</el-button>
      </div>
      <el-form :inline="true" :model="form">
        <el-form-item>
          <el-select
            v-model="form.haveRead"
            clearable
            :placeholder="$t('NOTICE_STATUS')"
          >
            <el-option
              v-for="(item, index) in dictList.NOTICE_STATUS"
              :key="index"
              :label="item.label"
              :value="item.value.toLowerCase()"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="$debounce(query)">{{ $t('QUERY') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <TableView
      ref="tableView"
      :table-header="tableHeader"
      :table-data="tableData"
      :operate-width="120"
      :options="{ seletion: true,configure: false }"
      :page-data="pageData"
      @operate="operate"
      @pageChange="pageChange"
      @selectionChange="handleSelectionChange"
    />
  </content>
</template>

<script>
  import { mapGetters } from 'vuex'
  import SysNoticeApi from '@/api/basebiz/SysNoticeApi'
  import TableView from '@/components/TableView'

  export default {
    components: {
      TableView
    },
    data() {
      return {
        tableData: [],
        pageData: {
          page: 1,
          size: 20,
          total: 0
        },
        form: {
          haveRead: ''
        },
        multipleSelection: [],
        tableHeader: [
          {
            label: 'SENDER',
            prop: 'sourceName',
            width: '120'
          },
          {
            label: 'CONTENT',
            prop: 'content',
            width: '300'
          },
          {
            label: 'NOTICE_TIME',
            prop: 'noticeTime',
            width: '120'
          },
          {
            label: 'NOTICE_STATUS',
            prop: 'haveReadName',
            width: '120'
          }
        ]
      }
    },
    computed: {
      ...mapGetters(['dictList', 'dictMap'])
    },
    mounted() {
      this.query()
    },
    methods: {
      query() {
        this.pageData.page = 1
        this.loadData()
      },
      loadData() {
        const params = {
          page: this.pageData.page,
          size: this.pageData.size,
          haveRead: this.form.haveRead
        }
        if (this.form.haveRead === '') delete params.haveRead
        SysNoticeApi.listSysNotice(params)
          .then(res => {
            const { list, total } = res
            list.forEach(i => {
              i.sourceName = this.dictMap.BIZ_MODULE[i.source] || ''
              i.haveReadName = this.dictMap.NOTICE_STATUS[i.haveRead.toString().toUpperCase()] || ''
              i.btns = this.getBtns(i)
            })
            this.tableData = list
            this.pageData.total = total
            this.$store.dispatch('getSysNoticeCount') // 更新系统通知未读个数
          })
          .catch(() => {})
      },
      getBtns(data) {
        const btns = [
          {
            key: 'read_ctrl',
            show: !data.haveRead,
            label: 'MESSAGE_CONFIRM'
          },
          {
            key: 'delete_ctrl',
            show: true,
            label: 'DEL'
          }
        ]
        return btns.filter(i => i.show)
      },
      operate(data) {
        console.log('data', data)
        switch (data.type) {
        case 'read_ctrl':
          this.readClick([data.data.id])
          break
        case 'delete_ctrl':
          this.deleteClick(data.data.id)
          break
        }
      },
      batchDeleteClick() {
        const ids = this.multipleSelection.map(i => i.id).join(',')
        this.deleteClick(ids)
      },
      // 删除（可批量删除）
      deleteClick(ids) {
        this.$confirm(this.$t('DELETE_SYS_NOTICE'), { type: 'warning' }).then(() => {
          console.log(ids)
          SysNoticeApi.delSysNotice(ids)
            .then(res => {
              if (res) {
                this.$message.success(this.$t('DELETE_SUCCESS'))
                this.loadData()
              } else {
                this.$message.error(this.$t('deleteFail'))
              }
              this.$refs.tableView.clearSelection()
            })
            .catch(() => {})
        })
      },
      batchReadClick() {
        const ids = this.multipleSelection.map(i => i.id)
        this.readClick(ids)
      },
      clear() {
        SysNoticeApi.clearUnread()
          .then(res => {
            if (res) {
              this.$message.success(this.$t('OPERATE_SUCCESS'))
              this.loadData()
            } else {
              this.$message.error(this.$t('OPERATEFAILED'))
            }
          })
          .catch(() => {})
      },
      // 确认已读（可批量确认）
      readClick(ids) {
        this.$confirm(this.$t('YES_NO_SYSTEM_NOTICE'), { type: 'warning' }).then(() => {
          SysNoticeApi.modSysNotice({
            ids: ids,
            haveRead: true
          })
            .then(res => {
              if (res) {
                this.$message.success(this.$t('OPERATE_SUCCESS'))
                this.loadData()
              } else {
                this.$message.error(this.$t('OPERATEFAILED'))
              }
              this.$refs.tableView.clearSelection()
            })
            .catch(() => {})
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      expDataClick() {
        const params = {
          page: this.pageData.page,
          size: this.pageData.size,
          haveRead: this.form.haveRead
        }
        if (this.form.haveRead === '') delete params.haveRead
        SysNoticeApi.expData()
          .then(res => {
            this.$downloadExcel(res, this.$t('MENU_MESSAGE_MANAGER'))
          })
          .catch(() => {})
      },
      pageChange(data) {
        this.pageData = data
        this.loadData()
      }
    }
  }
</script>

<style scoped></style>
